<template>
  <div class="FreTable">
    <div class="FreTable-title">
      <span class="FreTable-title-text">频率表</span>
      <img
        src="@/assets/images/taskDefinition/close.png"
        alt=""
        @click="closeDialog"
      />
    </div>
    <div class="FreTable-content">
      <el-form ref="form" :model="freqData" label-width="90px">
        <el-row>
          <el-col :span="20">
            <el-form-item label="频率间隔：">
              <div class="FreTable-input">
                <el-input v-model="freqData.freqInterval"> </el-input>
                <span class="Unit">MHZ</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <div class="fre-table" @click="handleFreData">计算</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="dividing-line"></div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="fre-table-flex">
              <div class="fre-table" @click="saveFreData">保存</div>
              <div class="fre-table">查询</div>
              <div class="fre-table">默认值</div>
            </div>
          </el-col>
        </el-row>
      </el-form>

      <div class="fre-form">
        <el-form :model="freqData" label-width="70px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="L1：">
                <div class="FreTable-form-input">
                  <el-input v-model="freqData.lFreqNumList[0]"> </el-input>
                  <span class="Unit">GHZ</span>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="H1：">
                <div class="FreTable-form-input">
                  <el-input v-model="freqData.hFreqNumList[0]"> </el-input>
                  <span class="Unit">GHZ</span>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="L2：">
                <div class="FreTable-form-input">
                  <el-input v-model="freqData.lFreqNumList[1]"> </el-input>
                  <span class="Unit">GHZ</span>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="H2：">
                <div class="FreTable-form-input">
                  <el-input v-model="freqData.hFreqNumList[1]"> </el-input>
                  <span class="Unit">GHZ</span>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="L3：">
                <div class="FreTable-form-input">
                  <el-input v-model="freqData.lFreqNumList[2]"> </el-input>
                  <span class="Unit">GHZ</span>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="H3：">
                <div class="FreTable-form-input">
                  <el-input v-model="freqData.hFreqNumList[2]"> </el-input>
                  <span class="Unit">GHZ</span>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="L4：">
                <div class="FreTable-form-input">
                  <el-input v-model="freqData.lFreqNumList[3]"> </el-input>
                  <span class="Unit">GHZ</span>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="H4：">
                <div class="FreTable-form-input">
                  <el-input v-model="freqData.hFreqNumList[3]"> </el-input>
                  <span class="Unit">GHZ</span>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="L5：">
                <div class="FreTable-form-input">
                  <el-input v-model="freqData.lFreqNumList[4]"> </el-input>
                  <span class="Unit">GHZ</span>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="H5：">
                <div class="FreTable-form-input">
                  <el-input v-model="freqData.hFreqNumList[4]"> </el-input>
                  <span class="Unit">GHZ</span>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="L6：">
                <div class="FreTable-form-input">
                  <el-input v-model="freqData.lFreqNumList[5]"> </el-input>
                  <span class="Unit">GHZ</span>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="H6：">
                <div class="FreTable-form-input">
                  <el-input v-model="freqData.hFreqNumList[5]"> </el-input>
                  <span class="Unit">GHZ</span>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="L7：">
                <div class="FreTable-form-input">
                  <el-input v-model="freqData.lFreqNumList[6]"> </el-input>
                  <span class="Unit">GHZ</span>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="H7：">
                <div class="FreTable-form-input">
                  <el-input v-model="freqData.hFreqNumList[6]"> </el-input>
                  <span class="Unit">GHZ</span>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="L8：">
                <div class="FreTable-form-input">
                  <el-input v-model="freqData.lFreqNumList[7]"> </el-input>
                  <span class="Unit">GHZ</span>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="H8：">
                <div class="FreTable-form-input">
                  <el-input v-model="freqData.hFreqNumList[7]"> </el-input>
                  <span class="Unit">GHZ</span>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="L9：">
                <div class="FreTable-form-input">
                  <el-input v-model="freqData.lFreqNumList[8]"> </el-input>
                  <span class="Unit">GHZ</span>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="H9：">
                <div class="FreTable-form-input">
                  <el-input v-model="freqData.hFreqNumList[8]"> </el-input>
                  <span class="Unit">GHZ</span>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="L10：">
                <div class="FreTable-form-input">
                  <el-input v-model="freqData.lFreqNumList[9]"> </el-input>
                  <span class="Unit">GHZ</span>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="H10：">
                <div class="FreTable-form-input">
                  <el-input v-model="freqData.hFreqNumList[9]"> </el-input>
                  <span class="Unit">GHZ</span>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="L11：">
                <div class="FreTable-form-input">
                  <el-input v-model="freqData.lFreqNumList[10]"> </el-input>
                  <span class="Unit">GHZ</span>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="H11：">
                <div class="FreTable-form-input">
                  <el-input v-model="freqData.hFreqNumList[10]"> </el-input>
                  <span class="Unit">GHZ</span>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="L12：">
                <div class="FreTable-form-input">
                  <el-input v-model="freqData.lFreqNumList[11]"> </el-input>
                  <span class="Unit">GHZ</span>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="H12：">
                <div class="FreTable-form-input">
                  <el-input v-model="freqData.hFreqNumList[11]"> </el-input>
                  <span class="Unit">GHZ</span>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="L13：">
                <div class="FreTable-form-input">
                  <el-input v-model="freqData.lFreqNumList[12]"> </el-input>
                  <span class="Unit">GHZ</span>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="H13：">
                <div class="FreTable-form-input">
                  <el-input v-model="freqData.hFreqNumList[12]"> </el-input>
                  <span class="Unit">GHZ</span>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="L14：">
                <div class="FreTable-form-input">
                  <el-input v-model="freqData.lFreqNumList[13]"> </el-input>
                  <span class="Unit">GHZ</span>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="H14：">
                <div class="FreTable-form-input">
                  <el-input v-model="freqData.hFreqNumList[13]"> </el-input>
                  <span class="Unit">GHZ</span>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="L15：">
                <div class="FreTable-form-input">
                  <el-input v-model="freqData.lFreqNumList[14]"> </el-input>
                  <span class="Unit">GHZ</span>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="H15：">
                <div class="FreTable-form-input">
                  <el-input v-model="freqData.hFreqNumList[14]"> </el-input>
                  <span class="Unit">GHZ</span>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="L16：">
                <div class="FreTable-form-input">
                  <el-input v-model="freqData.lFreqNumList[15]"> </el-input>
                  <span class="Unit">GHZ</span>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="H16：">
                <div class="FreTable-form-input">
                  <el-input v-model="freqData.hFreqNumList[15]"> </el-input>
                  <span class="Unit">GHZ</span>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "FreTable",
  data() {
    return {
      freqData: {
        freqInterval: "",
        lFreqNumList: [],
        hFreqNumList: [],
      },
    };
  },
  computed: {},
  watch: {},
  components: {},
  props: {
  },
  methods: {
    // 关闭弹窗
    closeDialog() {
      this.$emit("closeDialog");
    },
    // 失去焦点，选择了频率间隔
    saveFreData() {
      this.$emit("getFreqInterval", this.freqData);
      console.log('this.freqDatathis.freqData',this.freqData);
      
      this.closeDialog();
    },
    // 处理频率
    handleFreData() {
      if (!this.freqData.lFreqNumList[0]) {
        this.$message({
          message: "请输入频率L1",
          type: "warning",
        });
        return;
      }
      if (!this.freqData.hFreqNumList[0]) {
        this.$message({
          message: "请输入频率H1",
          type: "warning",
        });
        return;
      }
      let freq = this.freqData.freqInterval;
      let lFreqNum = this.freqData.lFreqNumList[0];
      let hFreqNum = this.freqData.hFreqNumList[0];
      for (let index = 0; index < 16; index++) {
        this.$set(
          this.freqData.lFreqNumList,
          index,
          (lFreqNum * 1000 - freq * index) / 1000
        );
        this.$set(
          this.freqData.hFreqNumList,
          index,
          (hFreqNum * 1000 - freq * index) / 1000
        );
      }
    },
  },
  mounted() {
  },
};
</script>
<!-- 因为是弹窗，所以全局方法 -->
<style lang="scss" scoped>
.FreTable {
  width: 100%; /* 自定义弹窗宽度 */
  height: 34.375rem;
  background: url("~@/assets/images/taskDefinition/fre-background.png") no-repeat;
  background-size: 100% 100%;
  padding: 0.3125rem;

  .FreTable-title {
    font-size: 1.25rem;
    font-weight: bold;
    background: url("~@/assets/images/taskDefinition/vice-title.png") no-repeat;
    background-size: 100% 100%;
    height: 2.5rem;
    line-height: 2.5rem;
    padding: 0 0.625rem 0 1.875rem;
    color: #b7e7fc;
    .FreTable-title-text {
      text-align: left;
    }
    img {
      width: 1.5626rem;
      height: 1.5626rem;
      float: right;
      margin-top: 0.75rem;
      cursor: pointer;
    }
  }

  .FreTable-content {
    padding: 1.25rem;
    .FreTable-input {
      width: 12.5rem;
      position: relative;
    }
    .FreTable-form-input {
      width: 7.5rem;
      position: relative;
    }
    .fre-table-flex {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      .fre-table {
        width: 5.625rem;
        height: 2.5rem;
        line-height: 2.5rem;
        text-align: center;
        color: #fff;
        background: url("~@/assets/images/taskDefinition/btn.png") no-repeat;
        background-size: 100% 100%;
        margin-left: 0.625rem;
        cursor: pointer;
      }
      .fre-table:hover {
        color: aqua;
      }
    }
    .fre-table:hover {
      color: aqua;
    }
    .dividing-line {
      border-bottom: 0.125rem solid #3e627f;
      margin: 1.25rem 0;
    }
    .fre-form {
      padding: 1.25rem 0px;
      height: 20.625rem;
      overflow: auto;
    }
    /*定义整体的宽度*/
    .fre-form::-webkit-scrollbar {
      width: 0.1875rem;
    }
    /*定义滚动条轨道*/
    .fre-form::-webkit-scrollbar-track {
      border-radius: 0.3125rem;
    }
    /*定义滑块*/
    .fre-form::-webkit-scrollbar-thumb {
      border-radius: 0.3125rem;
      background: rgba(27, 140, 236, 0.5);
    }
    .fre-table {
      width: 5.625rem;
      height: 2.5rem;
      line-height: 2.5rem;
      text-align: center;
      color: #fff;
      background: url("~@/assets/images/taskDefinition/btn.png") no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
    }
  }
}

.Unit {
  display: inline-block;
  width: 3.4375rem;
  height: 2.5rem;
  line-height: 2.5rem;
  text-align: left;
  position: absolute;
  right: -3.625rem;
  font-size: 1.25rem;
  color: #fff;
}
</style>
